﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<html>
<head>
    <meta charset="utf-8">
    <title>人员选择</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .search-box {
            padding: 10px;
            background-color: #f2f2f2;
            margin-bottom: 10px;
        }
        .layui-form-label {
            width: 100px;
            padding: 8px 10px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        .footer-buttons {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px;
            text-align: center;
            background-color: #fff;
            border-top: 1px solid #e6e6e6;
            z-index: 999;
        }
        .department-tree {
            width: 250px;
            padding: 10px;
            border-right: 1px solid #e6e6e6;
            float: left;
            height: calc(100vh - 20px);
            overflow-y: auto;
        }
        .user-table-container {
            margin-left: 265px;
            padding: 10px;
            height: calc(100vh - 20px);
            overflow: hidden;
        }
        .layui-form-item {
            margin-bottom: 10px;
        }
        .layui-form-item .layui-inline {
            margin-bottom: 0;
        }
        .search-buttons {
            text-align: center;
            padding-top: 3px;
        }
        .search-buttons .layui-btn {
            margin: 0 5px;
        }
        /* 添加单选按钮居中样式 */
        .layui-table-cell .layui-form-radio {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .layui-table-cell {
            display: flex !important;
            align-items: center;
            justify-content: center;
            padding: 0 !important;
        }
        
        /* 添加行悬停和选中效果 */
        .layui-table-hover {
            background-color: #f2f2f2 !important;
        }
        .layui-table-click {
            background-color: #e6e6e6 !important;
        }
        /* 让整行可点击的样式 */
        .layui-table tbody tr {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <!-- 部门树 -->
        <div class="department-tree" id="departmentTree"></div>

        <!-- 用户列表区域 -->
        <div class="user-table-container">
            <!-- 数据表格 -->
            <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
        </div>

        <!-- 底部按钮 -->
        <div class="footer-buttons">
            <button type="button" class="layui-btn" id="confirmBtn">确定</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="parent.layer.close(parent.layer.getFrameIndex(window.name))">取消</button>
        </div>
    </div>

    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    
    <script>
        layui.use(['table', 'form', 'layer', 'tree'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var tree = layui.tree;
            var selectedData = null;
            var currentDepartmentId = null;
            
            // 初始化表格
            function initTable() {
                table.render({
                    elem: '#userTable'
                    ,url: '/ProductionReport/GetUser'
                    ,method: 'get'
                    ,title: '人员选择'
                    ,where: {
                        departmentid: currentDepartmentId || 0
                    }
                    ,parseData: function(res) {
                        return {
                            "code": 0,
                            "msg": "",
                            "count": res.length,
                            "data": res
                        };
                    }
                    ,cols: [[
                        {type: 'radio', width: 60, align: 'center', unresize: true, style: 'padding: 0; height: 100%; display: flex; align-items: center; justify-content: center;'}
                        ,{field: 'userName', title: '用户名称', width: 150}
                        ,{field: 'userNickName', title: '用户昵称', width: 150}
                        ,{field: 'departmentName', title: '部门', width: 200, templet: function(d){
                            return d.departmentName || '未分配';
                        }}
                        ,{field: 'userPhone', title: '手机号码', width: 150}
                        ,{field: 'status', title: '状态', width: 100, align: 'center', templet: function(d){
                            return '<input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" ' + (d.status ? 'checked' : '') + ' disabled>';
                        }}
                        ,{field: 'createTime', title: '创建时间', width: 180, templet: function(d){
                            return d.createTime ? layui.util.toDateString(new Date(d.createTime), 'yyyy-MM-dd HH:mm:ss') : '';
                        }}
                    ]]
                    ,page: true
                    ,height: 'full-180'
                    ,size: 'lg'
                });
            }

            // 重新加载用户表格
            function reloadUserTable() {
                table.reload('userTable', {
                    where: {
                        departmentid: currentDepartmentId
                    }
                });
            }

            // 初始化表格
            initTable();

            // 加载部门树
            $.get('/ProductionReport/GetDepartment', function(res) {
                if (res) {
                    // 转换数据格式为layui tree需要的格式
                    var treeData = res.map(function(item) {
                        return {
                            id: item.id,
                            title: item.departmentName,
                            spread: true
                        };
                    });
                    
                    // 渲染部门树
                    tree.render({
                        elem: '#departmentTree',
                        data: treeData,
                        click: function(obj) {
                            currentDepartmentId = obj.data.id;
                            console.log('选中部门ID:', currentDepartmentId);
                            // 重新加载用户表格
                            reloadUserTable();
                        }
                    });
                }
            });

            // 监听行单选框选中事件
            table.on('radio(userTable)', function(obj){
                selectedData = obj.data;
                console.log('选中的用户数据:', selectedData);
            });

            // 添加行点击事件监听
            table.on('row(userTable)', function(obj){
                // 选中当前行的单选框
                obj.tr.find('input[type="radio"]').prop('checked', true);
                
                // 更新选中数据
                selectedData = obj.data;
                
                // 更新行的选中状态样式
                obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                
                // 触发 radio 事件以保持一致性
                layui.form.render('radio');
            });

            // 确定按钮点击事件
            $('#confirmBtn').on('click', function(){
                if(!selectedData) {
                    layer.msg('请选择一条数据');
                    return;
                }
                
                try {
                    // 获取父窗口的jQuery对象
                    var parentWindow = $(parent.document);
                    
                    // 设置父窗口中审核人输入框的值为选中用户的昵称
                    parentWindow.find('#reviewer').val(selectedData.userNickName);
                    
                    // 触发父窗口的表单更新
                    if(parent.layui && parent.layui.form) {
                        parent.layui.form.render();
                    }
                    
                    // 关闭弹窗
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    
                } catch(e) {
                    console.error('设置数据时出错:', e);
                    layer.msg('数据传递失败：' + e.message);
                }
            });

            // 搜索表单提交
            form.on('submit(searchForm)', function(data){
                selectedData = null;  // 重置选中数据
                table.reload('userTable', {
                    where: {
                        departmentid: currentDepartmentId || 0,
                        userName: data.field.userName,
                        phoneNumber: data.field.phoneNumber
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>